<!doctype html>
<html>

	<head>

		<!-- MISC/META -->
		<title> ZenPen ~ Minimal Distraction, Maximum Zen </title>
        <meta charset="utf-8">
		<meta name="description" content="Zenpen - A minimal text editor, made to stay out of the way while you get the words down.">
        
		<!-- CSS -->
		<link href="//fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic" rel="stylesheet" type="text/css">
		<link href="css/style.css" rel="stylesheet">
		<link href="css/fonts.css" rel="stylesheet">

    </head>

	<body class="yin">

		<div class="overlay">
			<div class="wordcount modal">
				<h1>Target Word Count</h1>
				<div>
					<input type="number" name="quantity" value="0" min="0" />
				</div>
			</div>

			<div class="description modal">
				<h1> About ZenPen </h1>
				<p>  Zenpen is a clean and simple writing zone, made by <a href="http://tholman.com">Tim Holman</a> (<a href="http://twitter.com/twholman">@twholman</a>), to get you into that zone, where you can focus on the writing.
				<br><br>ZenPen is open source on <a href="http://github.com/tholman/zenpen">Github</a>.
				<br><br>If you have any questions, hit me up via <a href="mailto:timothy.w.holman@gmail.com">email</a>.</p>
			</div>
			
			<div class="saveoverlay modal">
				<h1>Select save format</h1>
				<p class='saveselection'>
					<span data-format='markdown'>Markdown</span>
					<span data-format='html'>HTML</span>
					<span data-format='plain'>Plain Text</span>
				</p>
				<button class='savebutton useicons'>&#xe006;</button>
				<div> Or select format and press ctrl+c (cmd+c on mac) to copy the text. </div>
				<textarea class='hiddentextbox'></textarea>
			</div>
		</div>

		<div class="text-options">
			<div class="options">
				<span class="no-overflow">
					<span class="lengthen ui-inputs">
						<button class="url useicons">&#xe005;</button>
						<input class="url-input" type="text" placeholder="Type or Paste URL here"/>
						<button class="bold">b</button>
						<button class="italic">i</button>
						<button class="quote">&rdquo;</button>
					</span>
				</span>
			</div>
		</div>

		<div class="ui">

			<div class="wrapper">

				<div class="top editing">
					<button class="fullscreen useicons" title="Toggle fullscreen">
						&#xe000;
					</button>

					<button class="color-flip useicons" title="Invert colors">
						&#xe002;
					</button>

					<button class="target useicons" title="Set target word count">
						&#xe001;
					</button>
					<button class="save useicons" title="Save Text">
						&#xe003;
					</button>
				</div>

				<div class="bottom">
					<button class="about">
						?
					</button>
				</div>
			</div>
		</div>

		<div class="word-counter">
			<span class="progress"></span>
		</div>

		<section>
			
			<header contenteditable="true" class="header"></header>
			<article contenteditable="true" class="content"></article>

		</section>

		<!-- LIBS -->
		<script src="js/libs/FileSaver.min.js"></script>
		<script src="js/libs/Blob.min.js"></script>
		<script src="js/libs/screenfull.min.js"></script>
		
		<!-- JS -->
		<script src="js/default.js"></script>
		<script src="js/utils.js"></script>
		<script src="js/editor.js"></script>
		<script src="js/ui.js"></script>
		<script type="text/javascript">
	        // Initiate ZenPen
	        ZenPen.editor.init();
	    	ZenPen.ui.init();
        </script>
	</body>
</html>
